//alert(11);//检测js文件是否连接好
//逻辑：
//1.获取节点(要操作的节点)
    var ban = document.getElementById("ban");
    var dianUl = document.getElementById("dianUl");
    var imgs = document.getElementsByTagName("img");
    var lis = dianUl.getElementsByTagName("li");
    var leftBtn = document.getElementById("leftBtn");
    var rightBtn = document.getElementById("rightBtn");
    console.log(rightBtn);
//2.封装函数块
    var index = 0;//放图片的索引号
	function bo(){
		index++;
//		if(index == 5){
//			index = 0;
//		}
		index = index == 5?0:index;
//		//2-1 隐藏所有的图片
//		for(var i=0;i<imgs.length;i++){
//			imgs[i].style.display = "none";
//		}
//		//2-2 把需要展示的图片显示出来
//		imgs[index].style.display = "block";
//		//2-3 把所有的小圆点的背景色设为黑色
//		for(var i=0;i<lis.length;i++){
//			lis[i].style.background = "#000";
//		}
//		//2-4 和展示的图片索引一致的小圆点背景色改为红色
//		lis[index].style.background = "red";
         fu();
	}
//3.加定时器让轮播动起来setIntereval(执行函数块，间隔时间)
	var t = setInterval(bo,1000);
//4.当鼠标移入时，停在当前页
//移入图片  弊端 ：耗性能
//for(var i=0; i<imgs.length;i++){
//	imgs[i].onmouseover = function(){
//	clearInterval(t);
//  }
//}
//优化
ban.onmouseover = function(){
	clearInterval(t);
}
//5.当鼠标移出banner时，轮播继续
ban.onmouseout = function(){
	t = setInterval(bo,1000);
}
//6.鼠标移到小圆点上，显示索引相对应的图片
for(var j=0;j<lis.length;j++){
	//给小圆点对象自定义属性suoYin，将j的值赋值给它
	lis[j].suoYin = j;//当j=0  存的是0-4
	console.log("j的值" + j);
	//移入小圆点，隐藏所有图片，将所有小圆点的背景色改为黑色，只显示和移入的小圆点索引一致的图片并把该原点
	lis[j].onmouseover = function(){
		index = this.suoYin;//this.suoYin = 0; 当前小圆点 里面只有一个值
	    console.log("index的值："+ index);
//	    //隐藏所有的图片
//		for(var i=0;i<imgs.length;i++){
//			imgs[i].style.display = "none";
//		}
//		//把所有的小圆点的背景色设为黑色
//		for(var i=0;i<lis.length;i++){
//			lis[i].style.background = "#000";
//		}
//		//显示索引相对应的图片
//		imgs[index].style.display = "block"
//		//和展示的图片索引一致的小圆点背景色改为红色
//		lis[index].style.background = "red";
        fu();
	}//end mouse
}// end for
//7.点击左边的按钮，显示前一张
 leftBtn.onclick = function(){
 	index--;//索引的是前一张
 	if(index<0){
 		index = 4;
 	}
// 	 //隐藏所有的图片
//		for(var i=0;i<imgs.length;i++){
//			imgs[i].style.display = "none";
//		}
//		//把所有的小圆点的背景色设为黑色
//		for(var i=0;i<lis.length;i++){
//			lis[i].style.background = "#000";
//		}
//		//显示索引相对应的图片
//		imgs[index].style.display = "block"
//		//和展示的图片索引一致的小圆点背景色改为红色
//		lis[index].style.background = "red";
        fu();
 	
 }
//8.点击右边的按钮，显示后一张
rightBtn.onclick = function(){
	index++;
	if(index>4){
		index = 0;
	}
	//隐藏所有的图片
//		for(var i=0;i<imgs.length;i++){
//			imgs[i].style.display = "none";
//		}
//		//把所有的小圆点的背景色设为黑色
//		for(var i=0;i<lis.length;i++){
//			lis[i].style.background = "#000";
//		}
//		//显示索引相对应的图片
//		imgs[index].style.display = "block"
//		//和展示的图片索引一致的小圆点背景色改为红色
//		lis[index].style.background = "red";
        fu();
}

//9.多次重复使用的代码，封装到函数中，在需要的地方调用函数即可，增强代码的复用性和可读性
  function fu(){
  	//隐藏所有的图片
		for(var i=0;i<imgs.length;i++){
			imgs[i].style.display = "none";
		}
		//把所有的小圆点的背景色设为黑色
		for(var i=0;i<lis.length;i++){
			lis[i].style.background = "#000";
		}
		//显示索引相对应的图片
		imgs[index].style.display = "block"
		//和展示的图片索引一致的小圆点背景色改为红色
		lis[index].style.background = "red";
  }
